<template>
  <div>
    <CollapseContainer title="安全设置" :canExpan="false">
      <List>
        <template v-for="item in list" :key="item.key">
          <ListItem>
            <ListItemMeta>
              <template #title>
                {{ item.title }}
                <div class="extra" v-if="item.extra" @click="handleEdit(item)">
                  {{ item.extra }}
                </div>
              </template>
              <template #description>
                <div>
                  {{ getDescription(item) }}
                </div>
              </template>
            </ListItemMeta>
          </ListItem>
        </template>
      </List>
    </CollapseContainer>
    <SecureSettingModal @register="setRegisterModal" />
  </div>
</template>

<script lang="ts">
import { List } from 'ant-design-vue'
import { computed, defineComponent } from 'vue'
import { CollapseContainer } from '@/components/Container'
import { ListItem, SecureEnum, secureSettingList } from './data'
import { useUserStore } from '@/store/user'
import { useModal } from '@/components/Modal'
import { isEmpty } from '@admin/utils'
import SecureSettingModal from './SecureSettingModal.vue'

export default defineComponent({
  name: 'SecureSetting',
  components: {
    SecureSettingModal,
    CollapseContainer,
    List,
    ListItem: List.Item,
    ListItemMeta: List.Item.Meta,
  },
  setup() {
    const userStore = useUserStore()

    const [setRegisterModal, { openModal: setOpenModal }] = useModal()

    const userName = computed(() => {
      const { userName } = userStore.getUserInfo
      return userName
    })

    const phone = computed(() => {
      const { phone } = userStore.getUserInfo
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    })

    const email = computed(() => {
      const { email } = userStore.getUserInfo
      return email
    })

    /** 显示 */
    function getDescription(record: ListItem) {
      switch (record.code) {
        case SecureEnum.USER_NAME:
          return '当前账户账号：' + userName.value
        case SecureEnum.PASSWORD:
          return '当前密码强度：强'
        case SecureEnum.PHONE:
          return isEmpty(phone.value) ? '未绑定' : '已绑定手机：' + phone.value
        case SecureEnum.EMAIL:
          return isEmpty(email.value) ? '未绑定' : '已绑定邮箱：' + email.value
        default:
          return ''
      }
    }

    /** 修改按钮 */
    function handleEdit(record: ListItem) {
      setOpenModal(true, {
        record,
      })
    }

    return {
      list: secureSettingList,
      userName,
      phone,
      email,
      getDescription,
      handleEdit,
      setRegisterModal,
    }
  },
})
</script>

<style lang="less" scoped>
.extra {
  float: right;
  margin-top: 10px;
  margin-right: 30px;
  font-weight: normal;
  color: #1890ff;
  cursor: pointer;
}
</style>
